
#tb{

    border:solid 1px black;
    border-collapse: collapse;
}



.cell{
    width: 20px;
    height:20px;
    border:solid 1px black;
    background-size: 100% 100%;

    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.cell[state="normal"]{
    background-image: url(blank.png);
}

.cell[state="flag"]{
    background-image: url(flag.png);
}

.cell[state="bombex"]{
    background-image: url(boom_ex.png);
}
.cell[state="bombpl"]{
    background-image: url(boom_plain.png);
}

.cell[state="b0"]{
    background-image:none;
}

/* .cell[bomb]{
    background-image: url(boom_ex.png);
} */

.cell[state="b1"]::before{
    content:"1";
    color:blue;
}
.cell[state="b2"]::before{
    content:"2";
    color:red;
}
.cell[state="b3"]::before{
    content:"3";
    color:pink;
}
.cell[state="b4"]::before{
    content:"4";
    color:rosybrown;
}
.cell[state="b5"]::before{
    content:"5";
    color: green;
}
.cell[state="b6"]::before{
    content:"6";
    color:orange;
}
.cell[state="b7"]::before{
    content:"7";
    color: yellow;
}
.cell[state="b8"]::before{
    content:"8";
    color:seagreen;
}